<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="util.js"></script>
    <script src="flexible.min.js"></script>
    <script src="req.js"></script>
    <title>工厂灯光</title>

    <style>
        * {
            margin: auto;
            overflow: hidden;
        }

        body {
            background-color: #eee;
        }

        .mainbody {
            position: absolute;
            padding: 10px;
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .left {
            background-color: white;
            border: 1px solid blue;
            position: relative;
            float: left;
            height: 100%;
            padding: 10px;
            width: 70%;
        }

        .left img {
            position: absolute;
            top: 0;
            bottom: 0;
            display: block;
            width: 100%;
            height: 80%;
            margin: auto;
        }

        .right {
            width: 30%;
            height: 45%;
            /* margin: auto;
        margin-left: 3%; */
            /* border: 1px solid green; */
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        input {
            display: block;
            width: 55%;
            height: 10%;
            text-size-adjust: 10px;
            /* margin-top: 30%; */
            /* text-align: center; */
            margin: 20% auto;
        }
    </style>
</head>

<body>
    <!-- 主体 -->
    <div class="mainbody">
        <section class="left">
            <!-- 工厂灯光图片 -->
            <img alt="">
        </section>
        <!-- 操作面板 -->
        <section class="right">
            <!-- 开灯 -->
            <input type="button" onclick="fn_btn(1)" value="开启">
            <!-- 关灯 -->
            <input type="button" onclick="fn_btn(0)" value="关闭">
        </section>
    </div>
    <script>
        //进入页面查询一次灯光状态
        html_data()
        function html_data() {
            //获取灯光状态
            JQ('http://192.168.1.101:8085/dataInterface/UserWorkEnvironmental/getAll').then(e => {
                console.log(e.data[0].lightSwitch);
                data(e.data[0].lightSwitch)
            })
        }
        function fn_btn(type) {
            //发起修改灯光状态请求
            JQ('http://192.168.1.101:8085/dataInterface/UserWorkEnvironmental/update', {
                id: 1,
                lightSwitch: type
            }).then(e1 => {
                console.log(e1);
                data(e1.data.lightSwitch)
                //重新刷新数据
                html_data()
            })
        }
        //切换灯光图片 0为关灯 1为开灯
        function data(id) {
            switch (id) {
                case 0:
                    $('img').attr('src', 'img/stop.jpg')
                    break
                case 1:
                    $('img').attr('src', 'img/start.jpg')
                    break

            }
        }
    </script>
</body>

</html>